<template>
  <div>
    <pannel title="商品分类">
      <div slot="btn">
        <el-button type="primary" size="mini" @click="addShow = true">
          添加分类
        </el-button>
      </div>

      <el-table :data="tableData" style="width: 100%" v-loading="loading">
        <el-table-column prop="id" label="序号" width="180"> </el-table-column>
        <el-table-column label="分类名称" width="180">
          <template slot-scope="scope">
            <!-- 如果isEdit ==true 显示input  否则显示静态文本 -->
            <el-input
              v-model="scope.row.cateName"
              v-if="scope.row.isEdit"
            ></el-input>
            <span v-else>
              {{ scope.row.cateName }}
            </span>
          </template>
        </el-table-column>
        <el-table-column label="是否启用">
          <template slot-scope="scope">
            <!-- active-value  与绑定的数据 比较   全等比较 -->
            <!-- 如果isEdit ==true  开关可以更改-->
            <el-switch
              :disabled="!scope.row.isEdit"
              v-model="scope.row.state"
              active-color="#13ce66"
              inactive-color="#ccc"
              :active-value="1"
              :inactive-value="0"
            >
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <!--  如果isEdit ==true  显示完成 否则编辑 -->
            <el-button
              v-if="scope.row.isEdit"
              size="mini"
              type="success"
              @click="editGoodsTypeBtn(scope.row)"
              >完成</el-button
            >

            <el-button v-else size="mini" @click="scope.row.isEdit = true"
              >编辑</el-button
            >

            <el-button size="mini" type="danger"> 删除 </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        :current-page="page"
        :page-size="pageSize"
        :pager-count="5"
        @current-change="changePage"
        layout="prev, pager, next"
        :total="total"
      >
      </el-pagination>
    </pannel>

    <el-dialog title="添加分类" :visible.sync="addShow">
      <el-form :model="formData">
        <el-form-item label="分类名" label-width="120px">
          <el-input v-model="formData.cateName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="是否启用" label-width="120px">
          <el-switch
            v-model="formData.state"
            active-color="#13ce66"
            active-value="1"
            inactive-value="0"
          >
          </el-switch>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addShow = false">取 消</el-button>
        <el-button type="primary" @click="addTypeBtn"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Pannel from "@/components/Pannel.vue";
import { cateList, editCate,addCate } from "@/api/goods";
export default {
  data() {
    return {
      pageSize: 5,
      total: 0,
      page: 1,

      tableData: [],
      loading: true,
      //添加弹窗
      addShow: false,
      formData: {
        cateName: "",
        state:'1'  //默认数据--启用的
      },
    };
  },
  components: { Pannel },
  methods: {
    //添加分类
    addTypeBtn(){
      console.log(this.formData);
      addCate(this.formData).then(res=>{
        //隐藏模态框
        this.addShow = false;
        //提示用户
        this.$message.success('添加分类成功')
        //重新拉取列表
        this.getCateList()
      })
    },
    async getCateList() {
      let data = {
        currentPage: this.page,
        pageSize: this.pageSize,
      };
      let res = await cateList(data);
      //给每个对象添加一个属性 isEdit 默认值是false
      this.tableData = res.data.map((item) => {
        item.isEdit = false;
        return item;
      });
      this.total = res.total;
      //取消loading
      this.loading = false;
    },

    //页码改变
    changePage(page) {
      this.page = page;
      this.getCateList()
    },
    //修改分类数据
    async editGoodsTypeBtn(data) {
      //方案1
      //获取当前行最新的数据 ---发送axios 让后端去修改分类信息
      //修改当前行的编辑状态 isEdit =false
      //提示用户修改成功
      // let res = await editCate(data);
      // if(res.code ==0){
      //   this.$message.success('修改商品分类成功');
      //   data.isEdit = false;
      // }

      //方案2
      //获取当前行最新的数据 ---发送axios 让后端去修改分类信息
      //提示用户
      //重新拉去当前页的分类列表
      let res = await editCate(data);
      if (res.code == 0) {
        this.$message.success("修改商品分类成功");
        this.getCateList();
      }
    },
  },
  created() {
    this.getCateList();
  },
};
</script>

<style lang="less" scoped>
</style>